This introductory course will teach you the fundamentals of how to plan, design, and create a modern web site for your personal portfolio or business.

My commitment to you

I will

• be your guide through foundational concepts in web design
• show you live examples of how you can create features for your web page
• answer questions you have as we work through our projects
• try to respond to any emails you send in a timely manner

• this course is designed to help you gain an understanding of how the web is built (because you will be building webpages)

• you’ll understand how to create a web page and change it (because we will work on making changes together)

• you will have a solid foundation for learning about more advanced topics in web design and development should you chose to continue learning

My expectations of you

You will attend and participate in these classes

You will submit your exercises each week before class on GitHub

You will explore and experiment outside of class

You will help your classmates learn

You will give yourself permission to have fun

This course is about YOU.

I want you to stay focused on acheiving YOUR goals as we work together through this class.

Course mechanics

How to learn from this course

• take notes
• review your notes
• work on the materials outside of class
• make a commitment

I am your GUIDE and I will help you build solid foundations so that you can overcome the challenges that are unique to YOUR goals.

Check in on Canvas throughout the course.

There is no textbook for this course.

Course Overview

• Week 1 Getting to know each other and HTML

• Week 2 How to Design for the Web & Making Your First Live HTML Web Page

• Week 3 From Design to Code

• Week 4 Responsive Design for Mobile Devices

• Week 5 Adding Interaction with JavaScript

• Week 6 How the Web Works, or, Why Forms Aren’t Easy

• Week 7 Flash is Dead: Understanding Modern Web Animations

• Week 8 Sharing your projects and next steps

Today’s Agenda

• Intro to the course
• Introduce yourselves
• What is the web?
• Getting started with HTML
• break
• Activity: Write an HTML Document
• Writing Modern Software using Version Control

Every week we are going to build on the skills you learned the previous week so that you can do more and more things. But MY goal is to give you, TODAY, the independence to experiment outside of the classroom.

Questions?

• who are you
• what do you do
• why you are taking this class
• a website you spend a lot of time on

users send a request to a server

the server then returns content back to the browser based on the location we’ve entered

Content of the web is written using 3 technologies:

• HTML
• CSS
• JavaScript

What is HTML?

Hypertext

Wikipedia

source: Wikipedia

Why is Hypertext Powerful?

Puts users first!

Lets them read what they want to read when they want to read it.

TV Tropes

source: TV Tropes

Why is Hypertext Hard?

• More challenging to design for.
• You have to get users to meaningful choices quickly.
• You have to make it easy for them to find what they’re looking for before they tune out and move on.

How Do We Write HTML?

HTML is comprised of <tags> which are wrapped around content to create nodes or elements.

<p>This content is wrapped with a paragraph tag.</p>

Nesting

<div>
  <ul>
    <li>This is a list item element</li>
    <li>This text has a <span>nested span</span></li>
    <li>This item has <a href="example.html">a link</a></li>
  </ul>
</div>

Why Structure Matters

Structure is necessary to help machines understand what to do with our content.

• browsers
• screen readers
• web crawlers
• script files (like JavaScript)

Commonly Used

HTML5, the current standard for HTML, has roughly 100 tags.

The most useful HTML tags are what we call semantic tags.

To have mastery over HTML, you will need to be familiar with all of them.

To be able to create basic web pages, you will need to remember at roughly 20 of them

Let’s look at the HTML Cheatsheet I provided in Canvas and talk about some of the common tags.

Version control is one of the most powerful tools we have in software development.

Version Control is a tool that tracks changes made to the files in our code. It works with any kind of code and any kind of project.

Why use Version Control

Manual tracking is messy

Making changes can be scary

credit: Jorge Barrios via Wikipedia

credit: Various

Version control helps manage complexity

Software is - complex - code difficult for humans to read - has dependencies - is abstract

Version control helps us manage versions easily

Our integration with Netlify later will be a good example of why using git is helpful.

Key terms you need to know

Look in Canvas under Pages / Important Terms for the definitions for the following key version control terms

• git
• repository / repo
• history
• branches
• commits

• push
• pull
• merge
• clone